<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
      body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(92, 98, 82, 0.5);
        z-index: -1;
      }
      .slide-container {
        width: 70vw;
        height: 70vh;
        position: relative;
        /* 关键 */
        overflow: hidden;
        border-radius: 50px;
      }
      .slide {
        opacity: 0;
        width: 100vw;
        height: 100vh;
        background-position: center;
        background-size: cover;
        position: absolute;
        top: -15vh;
        left: -15vw;
        border: solid;
        z-index: 1;
        transition: 0.5s;
      }
      .slide.active {
        opacity: 1;
      }
      .arrow {
        position: fixed;
        background-color: transparent;
        padding: 20px;
        font-size: 30px;
        border: 1px solid rgb(18, 18, 18);
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: rgb(195, 197, 199);
        font-size: 20px;
      }
      .arrow-left {
        left: calc(15vw - 150px);
        transform: rotateY(180deg);
        top: 43%;
      }
      .arrow-right {
        right: calc(15vw - 150px);
      }
      img {
        width: 100px;
        height: 100px;
      }
      .arrow i {
        font-size: 50px;
        color: white;
      }
    </style>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
  </head>
  <body>
    <div class="slide-container">
      <div
        class="slide active"
        style="background-image: url(./imgs/wallhaven-01.png)"
      ></div>
      <div
        class="slide"
        style="background-image: url(./imgs/wallhaven-02.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(./imgs/wallhaven-03.png)"
      ></div>
      <div
        class="slide"
        style="background-image: url(./imgs/wallhaven-04.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(./imgs/wallhaven-05.jpg)"
      ></div>
      <button class="arrow arrow-left" id="left">
        <i class="iconfont">&#xe600;</i>
      </button>
      <button class="arrow arrow-right" id="right">
        <i class="iconfont">&#xe600;</i>
      </button>
    </div>
    <script>
      const body = document.body;
      const slides = document.querySelectorAll('.slide');
      const left = document.getElementById('left');
      const right = document.getElementById('right');
      //记录当前展示的是那张
      //索引从0开始
      let activeSlide = 0;
      //点击右移 下一张
      let moveNext = () => {
        activeSlide++;
        //边界处理
        if (activeSlide == slides.length) {
          activeSlide = 0;
        }
        setActiveSlide();
        setBgToBody();
      };
      right.onclick = moveNext;
      //点击左移 上一张
      let movePrev = () => {
        activeSlide--;
        //边界处理
        if (activeSlide < 0) {
          activeSlide = slides.length - 1;
        }
        setActiveSlide();
        setBgToBody();
      };
      left.onclick = movePrev;
      function setBgToBody() {
        body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
      }
      setBgToBody();
      function setActiveSlide() {
        slides.forEach((slide) => slide.classList.remove('active'));
        slides[activeSlide].classList.add('active');
      }
      // 自动播放
      let timer = setInterval(moveNext, 1500);
      // 设置鼠标 移入/移出 就 开始/停止 自动播放
      left.addEventListener('mouseenter', () => {
        clearInterval(timer);
      });
      left.addEventListener('mouseleave', () => {
        timer = setInterval(moveNext, 1500);
      });
      right.addEventListener('mouseenter', () => {
        clearInterval(timer);
      });
      right.addEventListener('mouseleave', () => {
        timer = setInterval(moveNext, 1500);
      });
    </script>
  </body>
</html>
